<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Галерея</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="gui.js" type="text/javascript"></script>
<style>
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    }
    ol, ul {
    	list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" "";
    }


    /*====================================================*/

.sys_empty4ie {
    display: none;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
* html .sys_empty4ie {
    zoom: 1;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}



    /*====================================================*/
    /*====================================================*/

    .polosa {
        /*width: 40em;*/
    }
    .block {
        width: 100%;
    }


    /*====================================================*/

    body {
        background-color: #DCB474;
    }
    .polosa {
        background-color: #FFFFFF;
    }
    h1 {
        font-size: 1.73em;
    }
    h2 {
        font-size: 1.44em;
    }
    h3 {
        font-size: 1.2em;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        Line-height: 1.44;
    }
    h4 {
        font-size: 1em;
    }
    h5 {
        font-size: 1em;
    }
    h6 {
        font-size: 1em;
    }
    h1, h2, h3, h4, h5, h6 {
        margin-left: -0.1em;
        margin-top: 0.5em;
        margin-bottom: 0.25em;
    }
    small {
        font-size: 67%
    }
    .ar {
        text-align: right;
    }
    .num1 {
        width: 2em;
        padding-right: 0.7em;
    }
    .pageNum {
        width: 3em;
        padding-right: 0.2em;
        font-size: 120%;
    }
    .pageCount {
        width: 1em;
    }


    .polosa {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    body {
        font-family:Arial,sans-serif;
        line-height:1.4;
    }
    .slides-bar {
        height: 700px;
        position: relative;
    }
    imd.slide {
        height: 600px;
    }



.t-overlay {
    width: 2000px;
    height: 700px;
    left: 0px;
    top: 0px;
    position: absolute;
}
* html .t-overlay {
    background-color: #C7DEF3;
    filter: alpha(opacity=0);
}
*+html .t-overlay {
    background-color: #C7DEF3;
    filter: alpha(opacity=0);
}

</style>

<!--==============================================================================-->
<!--==============================================================================-->


    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');

        data.addColumn('number', 'DayMax');
            data.addColumn('string', 'titleDayMax');
            data.addColumn('string', 'textDayMax');

        data.addColumn('number', 'DayMin');
            data.addColumn('string', 'titleDayMin');
            data.addColumn('string', 'textDayMin');

        data.addColumn('number', 'NightMax');
            data.addColumn('string', 'titleNightMax');
            data.addColumn('string', 'textNightMax');

        data.addColumn('number', 'NightMin');
            data.addColumn('string', 'titleNightMin');
            data.addColumn('string', 'textNightMin');

        data.addRows([
          [new Date(2010, 2 ,26), -4, undefined, undefined,
                                    -8, undefined, undefined,
                                  -11, undefined, undefined,
                                    -15, undefined, undefined],
          [new Date(2010, 2 ,27), -3, undefined, undefined,
                                    -7, undefined, undefined,
                                  -11, undefined, undefined,
                                    -15, undefined, undefined],
          [new Date(2010, 2 ,28), -3, undefined, undefined,
                                    -7, undefined, undefined,
                                  -9, undefined, undefined,
                                    -13, undefined, undefined],
          [new Date(2010, 3 , 1), -7, undefined, undefined,
                                    -11, undefined, undefined,
                                  -15, undefined, undefined,
                                    -19, undefined, undefined],
          [new Date(2010, 3 , 2), -8, undefined, undefined,
                                    -12, undefined, undefined,
                                  -15, undefined, undefined,
                                    -19, undefined, undefined],
          [new Date(2010, 3 , 3), -10, undefined, undefined,
                                    -14, undefined, undefined,
                                  -16, undefined, undefined,
                                    -20, undefined, undefined],
          [new Date(2010, 3 , 4), -8, undefined, undefined,
                                    -12, undefined, undefined,
                                  -18, undefined, undefined,
                                    -22, undefined, undefined],
          [new Date(2010, 3 , 5), -3, undefined, undefined,
                                    -7, undefined, undefined,
                                  -10, undefined, undefined,
                                    -14, undefined, undefined],
          [new Date(2010, 3 , 6), -3, undefined, undefined,
                                    -7, undefined, undefined,
                                  -11, undefined, undefined,
                                    -15, undefined, undefined],
          [new Date(2010, 3 , 7), -5, undefined, undefined,
                                    -9, undefined, undefined,
                                  -9, undefined, undefined,
                                    -13, undefined, undefined],
          [new Date(2010, 3 , 8), -4, undefined, undefined,
                                    -8, undefined, undefined,
                                  -7, undefined, undefined,
                                    -11, undefined, undefined],
          [new Date(2010, 3 , 9), -4, undefined, undefined,
                                    -8, undefined, undefined,
                                  -8, undefined, undefined,
                                    -12 , undefined, undefined],
          [new Date(2010, 3 ,10), -5, undefined, undefined,
                                    -9, undefined, undefined,
                                  -15, undefined, undefined,
                                    -19, undefined, undefined],
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
<!--==============================================================================-->
<!--==============================================================================-->


</head>
<body>
<!--==============================================================================-->
<!--==============================================================================-->



    <!--// Note how you must specify the size of the container element explicitly!-->
    <div id='chart_div' style='width: 1000px; height: 480px;'></div>


<!--==============================================================================-->
<!--==============================================================================-->

<div class="polosa">

<table id="slideshow" class="slides-bar block"><tr>
    <td><img src="http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL" width="800" height="600" /></td>
    <td><img src="http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL" width="800" height="600" /></td>
    <td><img src="http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL" width="800" height="600" /></td>
    <td><img src="http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL" width="800" height="600" /></td>
    <td><img src="http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL" width="800" height="600" /></td>
    <td><img src="http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL" width="800" height="600" /></td>
    <td><img src="http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL" width="800" height="600" /></td>
</tr></table>
<div id="slideshow-overlay" class="t-overlay"
                                                onclick="return false;"
                                                onmousedown="return false;"
                                                onmouseout="return false;"
                                                onmouseover="return false;"
                                                onmouseup="return false;"><span class="empty4ie"></span></div>

</div>
<script type="text/javascript">

var images = [{ url: 'http://img-fotki.yandex.ru/get/4013/philonov-d.2/0_59d89_7647ffbd_XL',
                width: 800,
                height: 600}];

for (var i in images) {
    var image = images[i];
    $('#slideshow > tr').append($('<td><img src="' + image.url + '" width="' + image.width + '" height="' + image.height + '" /></td>'));
}



var container = document.getElementById('container');
var table2 = document.getElementById('slideshow');
var tableOverlay2 = document.getElementById('slideshow-overlay');
var body = document.getElementsByTagName('html')[0];

tableOverlay2.gui = new tableGUIClass({
    owner: table2,
    overlay: tableOverlay2,
    a: -500
})

addHandler(body, 'mouseup', new classDrop(), false);
addHandler(body, 'mousemove', new classMove(), false);
addHandler(tableOverlay2, 'mousedown', new classDrag(tableOverlay2), false);

</script>
</body></html>